<template>
  <div class="leftpropwindow">
    <!-- 左侧弹出内容 -->
    <div>
      <div class="content_left">
        <!-- 上 -->
        <div class="cl_on">
          <!-- 左 -->
          <div class="clo_left">
            <!-- 我的图片 -->
            <van-image
              round
              width="60px"
              height="60px"
              :src="require('./../../../public/img/头像.png')"
              class="img2"
              @click="getitem"
            />
            <!-- 内容 -->
            <p class="username" ref="username">{{ userName }}</p>
            <p class="qtxinxi">
              关注<span>{{ follow }}</span
              >粉丝<span>{{ fans }}</span>
            </p>
          </div>
          <!-- 二维码 -->
          <van-image
            width="30px"
            height="30px"
            :src="require('./../../../public/img/二维码.png')"
            class="code"
          />
        </div>
        <!-- 下 -->
        <div class="cl_bottom">
          <ul>
            <li v-for="(item, index) in cl_bottomlist.list" :key="index">
              <van-image
                width="20px"
                height="20px"
                :src="item.imgUrl"
                class="clb_img"
              />
              {{ item.value }}
            </li>
            <li v-for="(item, index) in cl_bottomlist.list2" :key="index">
              <van-image
                width="20px"
                height="20px"
                :src="item.imgUrl"
                class="clb_img"
              />
              {{ item.value }}
            </li>
            <!-- 退出登录 -->
            <li @click="removeitem">
              <van-image
                width="20px"
                height="20px"
                :src="require('./../../../public/img/icon/icon13.png')"
                class="clb_img"
              />
              退出登录
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
export default {
  setup() {
    const follow = ref(localStorage.getItem("tel") ? "2" : "0");
    const fans = ref(localStorage.getItem("tel") ? "2" : "0");
    const router = useRouter();
    // 弹出列表
    const cl_bottomlist = reactive({
      list: [
        // 1
        {
          imgUrl: require("./../../../public/img/icon/icon1.png"),
          value: "动态",
        },
        // 2
        {
          imgUrl: require("./../../../public/img/icon/icon2.png"),
          value: "关注",
        },
        // 3
        {
          imgUrl: require("./../../../public/img/icon/icon3.png"),
          value: "好友",
        },
        // 4
        {
          imgUrl: require("./../../../public/img/icon/icon4.png"),
          value: "收藏",
        },
        // 5
        {
          imgUrl: require("./../../../public/img/icon/icon5.png"),
          value: "订单",
        },
        // 6
        {
          imgUrl: require("./../../../public/img/icon/icon6.png"),
          value: "浏览记录",
        },
      ],
      list2: [
        // 7
        {
          imgUrl: require("./../../../public/img/icon/icon7.png"),
          value: "TAOTAO周边",
        },
        // 8
        {
          imgUrl: require("./../../../public/img/icon/icon8.png"),
          value: "兑换中心",
        },
        // 9
        {
          imgUrl: require("./../../../public/img/icon/icon9.png"),
          value: "建议和反馈",
        },
        // 10
        {
          imgUrl: require("./../../../public/img/icon/icon10.png"),
          value: "设置",
        },
        // 11
        {
          imgUrl: require("./../../../public/img/icon/icon11.png"),
          value: "夜间模式",
        },
        // 12
        {
          imgUrl: require("./../../../public/img/icon/icon12.png"),
          value: "当前版本 2.11.0-mkt.300011",
        },
      ],
    });
    // 退出登录
    const userName = ref(
      localStorage.getItem("tel") ? localStorage.getItem("tel") : "点击头像登录"
    );

    const removeitem = () => {
      if (localStorage.getItem("tel")) {
        userName.value = "点击头像登录";
        follow.value = 0;
        fans.value = 0;
        localStorage.removeItem("tel");
      }
    };

    // 点击头像
    const getitem = () => {
      if (localStorage.getItem("tel")) {
        follow.value = 2;
        fans.value = 2;
      } else {
        router.push("/login");
        userName.value = "点击头像登录";
      }
    };

    return {
      cl_bottomlist,
      userName,
      removeitem,
      getitem,
      follow,
      fans,
    };
  },
};
</script>

<style lang="less" scoped>
.leftpropwindow {
  .content_left {
    font-size: 14px;
    // 上
    .cl_on {
      width: 100%;
      padding: 15px 15px 5px 15px;
      background: url("./../../../public/img/背景图.png");
      background-size: 330px 160px;
      color: #fff;
      position: relative;
      // 左
      .clo_left {
        .username {
          margin: 0;
        }
        .qtxinxi {
          margin: 0;
          font-size: 12px;
          span {
            margin: 0 10px 0 4px;
          }
        }
      }
      // 二维码
      .code {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translate(0, -50%);
      }
    }
    // 下
    .cl_bottom {
      ul {
        li {
          &:nth-child(6) {
            margin-bottom: 20px;
          }
          width: 85%;
          padding: 11px 15px;
          .clb_img {
            margin-right: 20px;
            transform: translate(0, 3.5px);
          }
        }
      }
    }
  }
}
</style>
